<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跨浏览器视频播放</title>
<link rel="stylesheet" href="media/styles.css" />
<script src="js/video/html5media.min.js"></script>
</head>
<body>
<div class="main">
	<div class="title">视频播放</div>
	<div class="videos">
		<video class="video" poster="media/poster.jpg" width="618" height="347" controls preload> 
			<source src="media/video.mp4" media="only screen and (min-device-width: 960px)"></source>
			<!-- 若要在iphone上播放，必须要有兼容iphone编码的mp4文件 -->
			<source src="media/video.iphone.mp4" media="only screen and (max-device-width: 960px)"></source>
			<!-- firefox 若无flash插件，则使用ogv文件 -->
			<source	src="media/video.ogv"></source>
			<source	src="media/video.webm"></source>
	 	</video>
	</div>
	<div class="title">音频播放</div>
    <div class="audios">
        <audio class="audio" controls preload>
            <source src="media/audio.mp3"></source>
            <!-- firefox 若无flash插件，则使用ogg文件 -->
            <source src="media/audio.ogg"></source>
        </audio>
    </div>
</div>	
</body>
</html>